<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="/css/jpetstore.css" type="text/css" media="screen"/>
</head>
<body>
<div th:replace="common/Header :: header"></div>
<div id="Content">
    <form action="/account/editAccount" method="post">
        <div id="Catalog">
            <h3>User Information</h3>
            <table>
                <tr>
                    <td th:text="${msg}" colspan="2" align="center">
                        <font color="red">Message</font><br>
                    </td>
                </tr>
                <tr>
                    <td>User ID:</td>
                    <td><input type="text" name="username" th:value="${session.loginUser.username}" disabled/></td>
                </tr>
                <tr>
                    <td>New password:</td>
                    <td><input type="password" name="password" id="Modifypassword"/></td>
                </tr>
                <tr>
                    <td>Repeat password:</td>
                    <td><input type="password" name="repeatedPassword" id="Modifyrepeatpassword"/>
                        <span id="PasswordCheck"></span>
                    </td>
                </tr>
                <style>
                    .ok {
                        color: Green;
                    }

                    .error {
                        color: red;
                    }
                </style>

                <script>
                    $('#Modifyrepeatpassword').on('blur', function () {
                        console.log($('#Modifypassword').val());
                        console.log(this.value);
                        // console.log(newpassword);
                        if (this.value === $('#Modifypassword').val()) {
                            $('#PasswordCheck').attr("class", "ok").text("Available");
                        } else {
                            $('#PasswordCheck').attr("class", "error").text("Unavailable");
                        }
                    });
                </script>

            </table>
            <div th:replace="account/ReplaceAccountFields3 :: replaceAccountFields3"></div>
        </div>
        <div style="text-align:center;vertical-align:middle;">
            <input type="submit" name="editAccount" value="Save Account Information"/></div>
    </form>
</div>
<div th:replace="common/Footer :: footer"></div>
</body>
</html>